<template>
  <el-dialog
    title="删除车辆"
    :visible.sync="deleteCarDialog"
    width="681px"
    class="dialogTitle"
    @close="close"
  >
    <div class="deleteTip1" v-html="msg1 + this.currentSelect + msg2"></div>
    <div class="deleteTip2">确定<b>删除</b>选中的车辆？</div>
    <div class="dialog-footer">
      <cs-btn
        type="primary"
        @click.native="confirmBtnClick"
        btnText="确定"
        :buttonStatus="buttonStatus"
      />
      <cs-btn @click.native="deleteCarDialog = false" btnText="取消" />
    </div>
  </el-dialog>
</template>

<script>
import csBtn from '@/components/cs-btn/cs-btn.vue'
import { deleteCar } from '@/service/operate/cart_manage/cart_manage'

export default {
  data() {
    return {
      deleteCarDialog: false,
      currentSelect: 0,
      msg1: '您已选择<b>',
      msg2: '个</b>车辆',
      deleteId: [],
      buttonStatus: false
    }
  },
  components: {
    csBtn
  },
  created() {
    this.$bus.$on('deleteBtnClick', () => {
      this.deleteCarDialog = true
    })
    this.$bus.$on('currentSelect_car', (selectNum) => {
      this.currentSelect = selectNum
    })
    // 接收需要删除的车辆ID
    this.$bus.$on('emitCatDelID', (selectNum) => {
      this.deleteId = selectNum
    })
  },
  beforeDestroy() {
    this.$bus.$off('delCatSuccess')
  },
  methods: {
    close() {},
    async confirmBtnClick() {
      this.buttonStatus = true
      try {
        const { code, data, msg } = await deleteCar(this.deleteId)
        if (code === 0) {
          this.$bus.$emit('delCatSuccess')
          this.$message({
            message: data,
            type: 'success'
          })
          this.deleteCarDialog = false
          setTimeout(() => {
            this.buttonStatus = false
          }, 500)
        } else {
          this.$message.error(msg)
          this.deleteCarDialog = false
          this.buttonStatus = false
        }
      } catch (err) {
        console.log(err)
        this.$message.error('服务器出错了')
        this.buttonStatus = false
      }
    }
  }
}
</script>

<style scoped>
.dialogTitle >>> .el-dialog {
  padding: 6px 10px 18px 10px !important;
}
</style>
